<script setup lang="ts">
const props = defineProps({});
const state = reactive({
  active: 0
});
const onClickTab = () => {};
</script>
<template>
  <div class="currencies">
     <div class='currencies-category'>
       <van-tabs v-model:active="state.active" @click-tab="onClickTab">
         <van-tab title="全部" name="1"></van-tab>
         <van-tab title="印股" name="2"></van-tab>
         <van-tab title="美股" name="3"></van-tab>
         <van-tab title="港股" name="4"></van-tab>
       </van-tabs>
     </div>
     <div class='currencies-item' v-for='(item,index) in 10'>
        <div class='left'>
          <img src='@/assets/images/icon/icon-home-list-btc.png' alt=''>
          <div class='info'>
            <div class='title'>SQQQ</div>
            <div class='desc'>ProshareProshareProshare</div>
          </div>
        </div>
        <div class='middle'>
          <img src='@/assets/images/icon/icon-home-list-tendency.png' alt=''>
        </div>
        <div class='right'>
          <div class='price'>404.87</div>
          <div class='rate'>404.87</div>
        </div>
     </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .van-tab{
  width: 30px;
  height: 17px;
  border: 1px solid #DDDDDD;
  border-radius: 30px;
  margin-right: 4px;
}
 ::v-deep .van-tab--active{
   background: #1642F4;
   color: #fff;
 }
 ::v-deep .van-tabs__line{
   display: none;
 }
 .currencies{
   display: flex;
   flex-direction: column;
   .currencies-item{
     width: 100%;
     box-sizing: border-box;
     min-height: 36px;
     display: flex;
     align-items: center;
     position: relative;
     &:after{
       width: 100%;
       display: inline-block;
       height: 0.5px;
       background: #EDEDED;
       content:'' ;
       position: absolute;
       bottom: 0;
     }
     .left{
       display: flex;
       align-items: center;
       flex: 1;
       img{
         flex-shrink: 0;
         width: 18px;
         margin-right: 4px;
       }
       .info{
         flex: 1;
         max-width: 33px;
         display: flex;
         flex-direction: column;
         .title{
           max-width: 100%;
           font-weight: bold;
           font-size: 8px;
           color: #2C2C2C;
           display: inline-block;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
         .desc{
           max-width: 100%;
           font-size: 7px;
           color: #2C2C2C;
           display: inline-block;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
       }
     }
     .middle{
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       img{
         width: 37px;
       }
     }
     .right{
       flex: 1;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       justify-content: center;
       .price{
         font-weight: bold;
         font-size: 8px;
         color: #2C2C2C;
       }
       .rate{
         font-weight: 400;
         font-size: 6px;
         color: #E8464A;
       }
     }
   }
 }

</style>
